<template>
  <div class="job-detail">
    <div class="breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem to="/">返回</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">岗位管理</BreadcrumbItem>
        <BreadcrumbItem>岗位详情</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="main-detail">
      <div class="job-detail-cart">
        <div class="info-name">{{postInfo.post_name}}</div>
        <div class="info-responsible">未分类</div>
        <div class="operation">
          <Button class="pierced">岗位编制</Button>
          <Dropdown>
            <a href="javascript:void(0)">
              <Button class="pierced">
                更多操作
                <Icon type="ios-arrow-down"></Icon>
              </Button>
            </a>
            <DropdownMenu slot="list" :on-click="deletePost">
              <DropdownItem >删除岗位</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <div class="info-detail">
          <span>
            在职
            <em>0</em>人
          </span>
          <span>
            已离职
            <em>0</em>人
          </span>
        </div>
      </div>

      <!-- tabs -->
      <div class="tab-box">
        <div class="tab-nav">
          <div
            class="tab-nav-item"
            :class="{tabActive:tabActiveIndex == 0}"
            @click="tabChange(0)"
          >基本信息</div>
          <!-- <div
            class="tab-nav-item"
            :class="{tabActive:tabActiveIndex == 1}"
            @click="tabChange(1)"
          >岗位属性</div>
          <div
            class="tab-nav-item"
            :class="{tabActive:tabActiveIndex == 2}"
            @click="tabChange(2)"
          >操作记录</div> -->
        </div>
        <div class="tab-content-wrap">
          <div class="tabpane none" :class="{block:tabActiveIndex == 0}">
            <div class="content-part">
              <div class="part-header">
                <div class="h-left">基础信息</div>
                <div class="h-right" @click="edit">
                  <Icon type="ios-add-circle" size="18" />编辑
                </div>
              </div>
              <div class="part-detail" v-if="!isEdit">
                <div class="row clearfix">
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">岗位名称</label>
                      <div class="controlInput ellipsis">{{postInfo.post_name}}</div>
                    </div>
                  </div>
                  <!-- <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">
                        岗位别名
                        <Icon type="ios-help-circle" class="label-icon" size="18" />
                      </label>
                      <div class="controlInput ellipsis"></div>
                    </div>
                  </div> -->
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">岗位编码</label>
                      <div class="controlInput ellipsis">{{postInfo.post_code}}</div>
                    </div>
                  </div>
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">岗位类别</label>
                      <div class="controlInput ellipsis">{{postInfo.post_type}}</div>
                    </div>
                  </div>
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">岗位状态</label>
                      <div class="controlInput ellipsis">已启用</div>
                    </div>
                  </div>
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">启用日期</label>
                      <div class="controlInput ellipsis">{{postInfo.c_time}}</div>
                    </div>
                  </div>
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">所属组织</label>
                      <div class="controlInput ellipsis">{{postInfo.organization_name}}</div>
                    </div>
                  </div>
                  <!-- <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">默认职级</label>
                      <div class="controlInput ellipsis">行政助理</div>
                    </div>
                  </div>
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">职级范围</label>
                      <div class="controlInput ellipsis">行政助理</div>
                    </div>
                  </div>
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">默认职等</label>
                      <div class="controlInput ellipsis">行政助理</div>
                    </div>
                  </div>
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">默认职等</label>
                      <div class="controlInput ellipsis">行政助理</div>
                    </div>
                  </div> -->
                  <!-- <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">是否研发岗位</label>
                      <div class="controlInput ellipsis">是</div>
                    </div>
                  </div>
                  <div class="row-12">
                    <div class="formGroup">
                      <label class="controlLabel">是否关键岗位</label>
                      <div class="controlInput ellipsis">否</div>
                    </div>
                  </div> -->
                </div>
              </div>
              <div class="part-detail-edit" v-if="isEdit">
                <Form :label-width="150" class="clearfix" :model="postInfo" ref="addPostType" :rules="ruleValidate">
                  <div class="row-12">
                    <FormItem label="岗位名称"  prop="post_name">
                      <Input v-model="postInfo.post_name" class="form-inp" placeholder="请输入..."></Input>
                    </FormItem>
                  </div>
                  <!-- <div class="row-12">
                    <FormItem label="岗位别名">
                      <Input v-model="formItem.input" class="form-inp" placeholder="请输入..."></Input>
                    </FormItem>
                  </div> -->
                  <div class="row-12">
                    <FormItem label="岗位编码">
                      <Input v-model="postInfo.post_code" class="form-inp" placeholder="请输入..."></Input>
                    </FormItem>
                  </div>
                  <div class="row-12 form-item-row2">
                    <FormItem label="岗位类别">
                       <Select v-model="postInfo.post_type_name" class="form-input" @on-change="selectPostType">
                          <Option :value="item.post_type_name" v-for="(item,index) in postTypeList" :key="index">{{item.post_type_name}}</Option>
                        </Select>
                    </FormItem>
                    <!-- <div class="form-item-tip">
                      管理证件类型，
                      <a>点击这里</a>
                    </div> -->
                  </div>
                  <div class="row-12">
                    <FormItem label="所属组织">
                       <Select v-model="postInfo.organization_name" class="form-input" @on-change="selectOrg" >
                        <Option :value="item.organization_name" v-for="(item,index) in orgList" :key="index">{{item.organization_name}}</Option>
                      </Select>
                    </FormItem>
                    </FormItem>
                  </div>
                  <!-- <div class="row-12">
                    <FormItem label="默认职级">
                      <Select v-model="formItem.select" class="form-input">
                        <Option value="beijing">New York</Option>
                        <Option value="shanghai">London</Option>
                        <Option value="shenzhen">Sydney</Option>
                      </Select>
                    </FormItem>
                    <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" />
                  </div>
                  <div class="row-12">
                    <FormItem label="职级范文">
                      <Select v-model="formItem.select" class="form-input2">
                        <Option value="beijing">New York</Option>
                        <Option value="shanghai">London</Option>
                        <Option value="shenzhen">Sydney</Option>
                      </Select>
                      <div class="col-line"></div>
                      <Select v-model="formItem.select" class="form-input2">
                        <Option value="beijing">New York</Option>
                        <Option value="shanghai">London</Option>
                        <Option value="shenzhen">Sydney</Option>
                      </Select>
                    </FormItem>
                  </div> -->
                  <!-- <div class="row-12">
                    <FormItem label="启用日期">
                      <DatePicker type="date" placeholder="Select date" class="form-input"></DatePicker>
                    </FormItem>
                  </div> -->
                  <!-- <div class="row-12">
                    <FormItem label="是否管理岗位">
                      <RadioGroup>
                        <Radio label="是"></Radio>
                        <Radio label="否"></Radio>
                      </RadioGroup>
                    </FormItem>
                  </div>
                  <div class="row-12">
                    <FormItem label="是否研发岗位">
                      <RadioGroup>
                        <Radio label="是"></Radio>
                        <Radio label="否"></Radio>
                      </RadioGroup>
                    </FormItem>
                  </div>
                  <div class="row-12">
                    <FormItem label="是否关键岗位">
                      <RadioGroup>
                        <Radio label="是"></Radio>
                        <Radio label="否"></Radio>
                      </RadioGroup>
                    </FormItem>
                  </div> -->
                </Form>
                <div class="form-footer">
                  <Button class="cancle-btn-border" @click="closeCard">取消</Button>
                  <Button type="default" class="save-btn-green ml12" @click="save">保存</Button>
                </div>
              </div>
            </div>
            <!-- <div class="content-part">
              <div class="part-header">
                <div class="h-left">汇报关系</div>
                <div class="h-right">
                  <Icon type="ios-add-circle" size="18" />编辑
                </div>
              </div>
              <div class="part-detail">
                <div class="row clearfix">
                  <div class="row-24">
                    <div class="formGroup">
                      <label class="controlLabel">直属上级</label>
                      <div class="controlInput ellipsis">行政助理</div>
                    </div>
                  </div>
                  <div class="row-24">
                    <div class="formGroup">
                      <label class="controlLabel">直属下级</label>
                      <div class="controlInput ellipsis"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="part-detail-edit">
                <Form :label-width="150" class="clearfix">
                  <div class="row-24 edit-row-24">
                    <FormItem label="岗位名称">
                      <Select v-model="formItem.select" class="form-input">
                        <Option value="beijing">New York</Option>
                        <Option value="shanghai">London</Option>
                        <Option value="shenzhen">Sydney</Option>
                      </Select>
                    </FormItem>
                    <a class="edit-other">其他</a>
                  </div>
                  <div class="row-24 edit-row-24">
                    <FormItem label="岗位别名">
                      <Select v-model="formItem.select" class="form-input">
                        <Option value="beijing">New York</Option>
                        <Option value="shanghai">London</Option>
                        <Option value="shenzhen">Sydney</Option>
                      </Select>
                    </FormItem>
                    <a class="edit-other" @click="changeInput">其他</a>
                  </div>
                </Form>
                <div class="form-footer">
                  <Button class="cancle-btn-border" @click="closeCard">取消</Button>
                  <Button type="default" class="save-btn-green ml12" @click="closeCard">保存</Button>
                </div>
              </div>
            </div> -->
          </div>
          <!-- <div class="tabpane none" :class="{block:tabActiveIndex == 1}">
            <div class="content-part">
              <div class="part-header">
                <div class="h-left">任职资格</div>
                <div class="h-right">
                  <Icon type="ios-add-circle" size="18" />编辑
                </div>
              </div>
              <div class="part-detail">
                <div class="row clearfix">
                  <div class="row-24">
                    <div class="formGroup2">
                      <label class="controlLabel controlLabel1">任职资格</label>
                      <div
                        class="controlInput2"
                      >333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="part-detail-edit">
                <Form :label-width="150" class="clearfix">
                  <div class="row-24 edit-row-24 edit-text">
                    <Input
                      maxlength="100"
                      show-word-limit
                      type="textarea"
                      placeholder="Enter something..."
                      style="width:100%;"
                      :rows="10"
                    />
                  </div>
                </Form>
                <div class="form-footer">
                  <Button class="cancle-btn-border" @click="closeCard">取消</Button>
                  <Button type="default" class="save-btn-green ml12" @click="closeCard">保存</Button>
                </div>
              </div>
            </div>

            <div class="content-part">
              <div class="part-header">
                <div class="h-left">学历要求</div>
                <div class="h-right">
                  <Icon type="ios-add-circle" size="18" />编辑
                </div>
              </div>
              <div class="part-detail">
                <div class="row clearfix">
                  <div class="row-24">
                    <div class="formGroup2">
                      <label class="controlLabel controlLabel1">未填写</label>
                      <div class="controlInput2"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="part-detail-edit">
                <Form :label-width="150" class="clearfix">
                  <div class="row-24 edit-row-24 edit-text">
                    <Input
                      maxlength="100"
                      show-word-limit
                      type="textarea"
                      placeholder="Enter something..."
                      style="width:100%;"
                      :rows="10"
                    />
                  </div>
                </Form>
                <div class="form-footer">
                  <Button class="cancle-btn-border" @click="closeCard">取消</Button>
                  <Button type="default" class="save-btn-green ml12" @click="closeCard">保存</Button>
                </div>
              </div>
            </div>

            <div class="content-part">
              <div class="part-header">
                <div class="h-left">自定义属性一</div>
                <div class="h-right">
                  <Icon type="ios-add-circle" size="18" />编辑
                </div>
              </div>
              <div class="part-detail">
                <div class="row clearfix">
                  <div class="row-24">
                    <div class="formGroup2">
                      <div class="controlInput2"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="part-detail-edit">
                <Form :label-width="150" class="clearfix">
                  <div class="row-24 edit-row-24 edit-text">
                    <Input
                      maxlength="100"
                      show-word-limit
                      type="textarea"
                      placeholder="Enter something..."
                      style="width:100%;"
                      :rows="10"
                    />
                  </div>
                </Form>
                <div class="form-footer">
                  <Button class="cancle-btn-border" @click="closeCard">取消</Button>
                  <Button type="default" class="save-btn-green ml12" @click="closeCard">保存</Button>
                </div>
              </div>
            </div>

            <div class="content-part">
              <div class="part-header">
                <div class="h-left">自定义属性二</div>
                <div class="h-right">
                  <Icon type="ios-add-circle" size="18" />编辑
                </div>
              </div>
              <div class="part-detail">
                <div class="row clearfix">
                  <div class="row-24">
                    <div class="formGroup2">
                      <div class="controlInput2"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="part-detail-edit">
                <Form :label-width="150" class="clearfix">
                  <div class="row-24 edit-row-24 edit-text">
                    <Input
                      maxlength="100"
                      show-word-limit
                      type="textarea"
                      placeholder="Enter something..."
                      style="width:100%;"
                      :rows="10"
                    />
                  </div>
                </Form>
                <div class="form-footer">
                  <Button class="cancle-btn-border" @click="closeCard">取消</Button>
                  <Button type="default" class="save-btn-green ml12" @click="closeCard">保存</Button>
                </div>
              </div>
            </div>
          </div>
          <div class="tabpane none" :class="{block:tabActiveIndex == 2}">
            <ul>
              <li class="oper-item">
                <div class="line"></div>
                <div class="dot">
                  <div class="dot-num dot-active">1</div>
                </div>
                <div class="content">
                  <div class="time">5月18日 21:31</div>
                  <div class="des">
                    <span>刘强创建了岗位行政助理</span>
                  </div>
                </div>
              </li>
              <li class="oper-item">
                <div class="line"></div>
                <div class="dot">
                  <div class="dot-num ">2</div>
                </div>
                <div class="content">
                  <div class="time">5月18日 21:31</div>
                  <div class="des">
                    <span>刘强创建了岗位行政助理</span>
                  </div>
                </div>
              </li>
            </ul>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { org } from "@/apis";
import http from "@/utils/http";
import utils from "@/utils/index.js"
export default {
  data() {
    return {
      tabActiveIndex: 0,
      post_id:this.$route.query.post_id,
      isEdit:false,
      postInfo: {
        post_name:"",
        post_code:"",
        post_type: "",
        organization_name: "",
      },
      orgList:[],
      postTypeList: [],
      ruleValidate: {
        post_name: [
          {
            required: true,
            message: "请输入岗位类别名称",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    tabChange(e) {
      this.tabActiveIndex = e;
    },
    changeInput() {},
    closeCard() {
      this.isEdit =false
    },
    getPostDetail(){
       http
        .get(org.postshow, { params: {post_id:this.post_id } })
        .then(res => {
           let info = res.data.post
           console.log('岗位详情',info);
           if(info.ctime){
             info.c_time = utils.toDate(info.ctime)
           }
           this.postInfo = info;
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },

    // 删除岗位
    deletePost(){
      console.log(1);
    },
    getOrgList() {
      http
        .get(org.organizationlist, {})
        .then(res => {
          console.log("组织列表", res);
          this.orgList = res.data.list.data;
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },

    // 获取岗位类型列表
    getPostTypeList() {
      http
        .get(org.posttypelist, {})
        .then(res => {
          console.log("岗位类别列表", res);
          this.postTypeList = res.data.list.data;
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },
    // 设置organization_id
    selectOrg(e){
      console.log(e);
      let current = this.orgList.find( (i) =>{
        return i.organization_name == e;
      })
      let organization_id = current.organization_id;
      this.postInfo.organization_id = organization_id;
    },
     selectPostType(e){
      console.log(e);
      let current = this.postTypeList.find( (i) =>{
        return i.post_type_name == e;
      })

      let post_type_id = current.post_type_id;
      this.postInfo.post_type_id = post_type_id;
    },
    save(){
      this.$refs["addPostType"].validate(valid => {
        if (valid) {
          console.log(this.postInfo);
          let _this = this;
          http
            .post(org.posttypecreate, { data: { ...this.postInfo } })
            .then(res => {
              _this.$Message.success("保存成功!");
              _this.isEdit = false;
            })
            .catch(error => {
              this.$Message.error(error);
            });
        } else {
          // this.$Message.error('Fail!');
        }
      });
    },
    edit(){
      if(this.isEdit){
        this.isEdit = false;
      }else{
        this.isEdit = true
      }
    }
  },
  mounted() {
    this.getPostDetail();
    this.getPostTypeList();
    this.getOrgList();
  },
};
</script>
<style lang="scss" scoped src="./index.scss">
</style>